<template>
  <view class="u-m-20">
    <uni-card>
      <u-form labelPosition="left" :model="model" :rules="rules" ref="uForm" :errorType="errorType">
        <u-form-item label="用户名" prop="username" label-width="90" left-icon="account" :leftIconStyle="{color:'#d5d5d5'}">
          <u-input placeholder="请输入用户名" v-model="model.username" border="bottom" type="text">
          </u-input>
        </u-form-item>
        <u-form-item label="密码" prop="password" label-width="80" left-icon="eye" :leftIconStyle="{color:'#d5d5d5'}">
          <u-input border="bottom" type="text" placeholder="请填写密码" v-model="model.password">
          </u-input>
        </u-form-item>
        <u-form-item label="昵称" prop="nickName" label-width="90" left-icon="account" :leftIconStyle="{color:'#d5d5d5'}">
          <u-input border="bottom" placeholder="请输入昵称(必填)" v-model="model.nickName" type="text"></u-input>
        </u-form-item>
        <u-form-item label="电话" prop="owerPhone" label-width="90" left-icon="phone" :leftIconStyle="{color:'#d5d5d5'}">
          <u-input border="bottom" placeholder="请输入电话(必填)" v-model="model.phone" type="number" maxlength="11"></u-input>
        </u-form-item>
        <u-form-item label="性别" prop="decoration" label-width="80" left-icon="account" :leftIconStyle="{color:'#d5d5d5'}">
          <u-radio-group v-model="model.gender" placement="row" wrap>
            <u-radio v-for="(item, index) in genderList" placement="row" :key="index" :label="item.label" :name="item.label"></u-radio>
          </u-radio-group>
        </u-form-item>
        <u-form-item left-icon="account" label="头像" label-width="80">
          <u-upload :fileList="fileList" @afterRead="afterRead" :previewFullImage="true" :max-size="10 * 1024 * 1024" @delete="deletePic" name="file" multiple :maxCount="1"></u-upload>
        </u-form-item>
      </u-form>
    </uni-card>
    <view class="u-m-t-20">
      <u-button type="primary" @click="submit">保存</u-button>
    </view>

  </view>
</template>

<script>
export default {
	onLoad() {
		this.getUser()
	},
  methods: {
    getUser() {
      // 页面展示,就获取保存在本地的用户名和头像
      let userifo = JSON.parse(uni.getStorageSync('userinfo') || '{}')
      // console.log(userifo)
      let url = userifo.avatarUrl
      console.log("getUser")
      this.fileList.push({ url })
      this.model = userifo
    },
    // 删除图片
    deletePic(event) {
      this.fileList = []
    },
    // 新增图片
    afterRead(event) {
      console.log(event)
      let file = event.file
      console.log("event",event)
      uni.uploadFile({
        url: 'http://127.0.0.1:80/upload', // 仅为示例，非真实的接口地址
        filePath: file[0].url,
        name: 'file',
        formData: {
          folderName: 'user'
        },
        success: ({ data }) => {
          console.log(data)
          let back = JSON.parse(data)
          let url = 'http://127.0.0.1:80' + back.data.filePath

          console.log(url)
          console.log(this.fileList)
          this.fileList.push({ url })
        }
      })
    },
    async submit() {
      this.model.avatarUrl = this.fileList[0].url
      let url = 'http://127.0.0.1/updateuser'
      let [, res] = await uni.request({
        url: url,
        data: {
          model: JSON.stringify(this.model)
        },
        method: 'GET'
      })
      uni.showToast({
        icon: 'success',
        title: '保存成功'
      })
      let userInfo = res.data.data
      uni.setStorageSync('userinfo', JSON.stringify(userInfo))
      setTimeout(() => {
        uni.switchTab({
          url: '/pages/center/center'
        })
      }, 1000)
    }
  },
  data() {
    return {
      fileList: [],
      model: {
        gender: '男'
      },
      rules: {},
      genderList: [
        {
          value: '男',
          label: '男'
        },
        {
          value: '女',
          label: '女'
        }
      ]
    }
  }
}
</script>
<style lang="scss" scoped>
.slot-content {
  padding: 40rpx;
}
</style>
